<template>
	<div>
		选择对应聊天室进行操作
		<button :class="{'iscurrent':current==1}" @click="current = 1">聊天室1</button>
		<button :class="{'iscurrent':current==2}" @click="current = 2">聊天室2</button>
		<button :class="{'iscurrent':current==3}" @click="current = 3">聊天室3</button>
	</div>
	<br>
	chatroomId:<input type="text" v-model="chatroomId">
	<br>
	token:<input type="text" v-model="token1">
	account:<input type="text" v-model="account1">
	<button @click="init(1)">初始化聊天室1</button>
	<span style="color: red" v-show="span1">已连接</span>
	<br>

	token:<input type="text" v-model="token2">
	account:<input type="text" v-model="account2">
	<button @click="init(2)">初始化聊天室2</button>
	<span style="color: red" v-show="span2">已连接</span>
	<br>

	token:<input type="text" v-model="token3">
	account:<input type="text" v-model="account3">
	<button @click="init(3)">初始化聊天室3</button>
	<span style="color: red" v-show="span3">已连接</span>
	<br>
	发送消息: <input type="text" v-model="msgText"><button @click="sendText">发送</button>
	<br>
	<br>
	设置黑名单字段: <button @click="markChatroomCommonMember">设置</button>
	<br>
	<br>
	<button @click="getChatroomMembers">获取成员列表</button>
	<br>
	<br>
	获取成员信息: <input type="text" v-model='accountId'> <button @click="getChatroomMembersInfo">获取</button>
	<br>
	设置自身信息: <input type="text" placeholder="nick" v-model='nick'><input type="text" placeholder="custom"
		v-model='custom'> <button @click="updateMyChatroomMemberInfo">设置</button>
</template>

<script>
	// import ChatroomSDK from 'nim-web-sdk-ng/dist/NIM_Web_Chatroom.js'
	import NIM from 'nim-web-sdk-ng'
	import Chatroom from '@yxim/nim-web-sdk/dist/SDK/NIM_Web_Chatroom.js'
	export default {
		name: 'HelloWorld',
		props: {
			msg: String
		},
		data() {
			return {
				token1: "6ad10018fb443cf3851510f812d9bba2",
				token2: "638e85c4da668effa86c4a633e4a5f9b",
				token3: "b1306aad1c27b47f531a498cf0f382d9",
				account1: "1",
				account2: "2",
				account3: "3",
				span1: false,
				span2: false,
				span3: false,
				chatroomId: "2302150639",
				chatroom1: null,
				chatroom2: null,
				chatroom3: null,
				msgText: '',
				accountId: '',
				current: 1,
				custom: "",
				nick: ""
			}
		},
		methods: {
			async init(param) {
				let vm = this;

				let account = vm.account1;
				let token = vm.token1;
				if (param === 1) {
					vm.span1 = true;
				}
				if (param === 2) {
					account = vm.account2;
					token = vm.token2;
					vm.span2 = true;
				} else if (param === 3) {
					account = vm.account3;
					token = vm.token3;
					vm.span3 = true;
				}
				console.log("account: token:", account, token)
				let chatoom = Chatroom.getInstance({
					appKey: '678ddcd03a3225cd7932d2ecef09d246',
					account: account,
					token: token,
					chatroomId: vm.chatroomId,
					chatroomAddresses: ["chatweblink12.netease.im:443", "chatweblink11.netease.im:443"],
					onconnect: onChatroomConnect,
					onerror: onChatroomError,
					onwillreconnect: onChatroomWillReconnect,
					ondisconnect: onChatroomDisconnect,
					tags: ["common"],
					// 消息
					onmsgs: onChatroomMsgs
				});
				vm[`chatroom${param}`] = chatoom
				// switch (param) {
				// 	case 1:
				// 	vm[`chatroom${vm.current}`]1 = chatoom
				// 		break;
				// 	case 2:
				// 	vm[`chatroom${vm.current}`]2 = chatoom
				// 		break;
				// 	case 3:
				// 	vm[`chatroom${vm.current}`]3 = chatoom
				// 		break;
				// }

				function onChatroomConnect(obj) {
					console.log('进入聊天室', obj);
				}

				function onChatroomWillReconnect(obj) {
					// 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
					console.log('即将重连', obj);
				}

				function onChatroomDisconnect(error) {
					// 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
					console.log('连接断开', error);
					if (error) {
						switch (error.code) {
							// 账号或者密码错误, 请跳转到登录页面并提示错误
							case 302:
								break;
								// 被踢, 请提示错误后跳转到登录页面
							case 'kicked':
								break;
							default:
								break;
						}
					}
				}

				function onChatroomError(error, obj) {
					console.log('发生错误', error, obj);
				}

				function onChatroomMsgs(msgs) {
					console.log('收到聊天室消息', msgs);
				}
			},
			getChatroomMembers() {
				this[`chatroom${this.current}`].getChatroomMembers({
					guest: false,
					limit: 100,
					done: getChatroomMembersDone
				});

				function getChatroomMembersDone(error, obj) {
					console.log('获取聊天室成员' + (!error ? '成功' : '失败'), error, obj.members);
				}
			},
			sendText() {
				let vm = this;
				var msg = vm[`chatroom${vm.current}`].sendText({
					text: vm.msgText,
					done: sendChatroomMsgDone
				});
				console.log('正在发送聊天室text消息, id=' + msg.idClient);

				function sendChatroomMsgDone(error, msg) {
					console.log('发送聊天室' + msg.type + '消息' + (!error ? '成功' : '失败') + ', id=' + msg
						.idClient, error, msg);
				}
			},
			getChatroomMembersInfo() {
				let vm = this;
				vm[`chatroom${vm.current}`].getChatroomMembersInfo({
					accounts: [vm.accountId],
					done: getChatroomMembersInfoDone
				});

				function getChatroomMembersInfoDone(error, obj) {
					console.log('获取聊天室成员信息' + (!error ? '成功' : '失败'), error, obj);
				}
			},
			markChatroomCommonMember() {
				let vm = this;
				let param = '{"a":"1"}';
				vm[`chatroom${vm.current}`].markChatroomCommonMember({
					account: '2',
					isAdd: true,
					level: 2,
					custom: param,
					done: markChatroomCommonMemberDone
				});

				function markChatroomCommonMemberDone(error, obj) {
					console.log('设置聊天室普通成员' + (!error ? '成功' : '失败'), error, obj.member);
				}
			},
			updateMyChatroomMemberInfo() {
				let vm = this;
				vm[`chatroom${vm.current}`].updateMyChatroomMemberInfo({
					member: {
						nick: vm.nick,
						custom: vm.custom,
					},
					needNotify: true,
					custom: 'chatroom.custom',
					done: updateMyChatroomMemberInfoDone
				})

				function updateMyChatroomMemberInfoDone(error, obj) {
					console.log('更新自己在聊天室内的信息' + (!error ? '成功' : '失败'), error, obj);
				}
			}
		},
		async mounted() {}
	}
</script>

<style>
	.iscurrent {
		color: red;
		border-color: red;
	}
</style>
